<html>
    <head>
        <title>Moe Counter!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" type="image/png" href="favicon.png"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"/>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <h3>How to use:</h3>
        <h5>SVG address</h5>
        <code>http://this.website.com/cmoe?name=yourname</code>
        <h5>Img tag</h5>
        <code>&lt;img src="http://this.website.com/cmoe?name=yourname" alt="yourname" /></code>
        <h5>Markdown</h5>
        <code>![yourname](http://this.website.com/cmoe?name=yourname)</code>
        <h3>
            eg:<img src="/cmoe?name=index" alt="Moe Count!"/>
        </h3>
        <i>
            Data can access by anyone, please <span style="color: #ff4500;">DO NOT</span>
            enter personal information
        </i>
        <details>
            <summary style="display: inline-block;" onclick="_evt_push(&quot;click&quot;, &quot;normal&quot;, &quot;more_theme&quot;)">
                <h3 style="display: inline-block; cursor: pointer;">More theme</h3>
            </summary>
            <p style="margin: 0;">
                Just use the query parameters <code>theme</code>
                , like this: <code>/cmoe?name=yourname&theme=mb</code>
            </p>
            <h5>moebooru(mb)</h5>
            <img src="/cmoe?name=demo&theme=mb" alt="Moebooru"/>
            <h5>moebooru-h(mbh)</h5>
            <img src="/cmoe?name=demo&theme=mbh" alt="Moebooru-Hentai"/>
            <h5>rule34(r34)</h5>
            <img src="/cmoe?name=demo&theme=r34" alt="Rule34"/>
            <h5>rule34-big(r3b)</h5>
            <img src="/cmoe?name=demo&theme=r3b" alt="Rule34-Big"/>
            <h5>gelbooru(gb)</h5>
            <img src="/cmoe?name=demo&theme=gb" alt="Gelbooru"/>
            <h5>gelbooru-h(gbh)</h5>
            <img src="/cmoe?name=demo&theme=gbh" alt="Gelbooru-Hentai"/>
            <h5>asoul(asl)</h5>
            <img src="/cmoe?name=demo&theme=asl" alt="A-SOUL">
            <h5>nixie(nix)</h5>
            <img src="/cmoe?name=demo&theme=nix" alt="Nixie-Tube">
            <h5>mobius(mbs)</h5>
            <img src="/cmoe?name=demo&theme=mbs" alt="Mobius-Path">
        </details>
        <h3>Credits</h3>
        <ul>
            <li>
                <a href="https://repl.it/" target="_blank" rel="nofollow">repl.it</a>
            </li>
            <li>
                <a href="https://github.com/moebooru/moebooru" target="_blank" rel="nofollow">moebooru</a>
            </li>
            <li>
                <a href="javascript:alert(&quot;!!! NSFW LINK !!!\nPlease enter the url manually&quot;)">rule34.xxx</a>
                NSFW
            </li>
            <li>
                <a href="javascript:alert(&quot;!!! NSFW LINK !!!\nPlease enter the url manually&quot;)">gelbooru.com</a>
                NSFW
            </li>
            <li>
                <a href="https://icons8.com/icons/set/star" target="_blank" rel="nofollow">Icons8</a>
            </li>
        </ul>
        <h3>Tool</h3>
        <div class="tool">
            <code>http://this.website.com/cmoe?name=</code>
            <input id="name" type="text" placeholder="name" style="display: inline-block; width: 80px; height: 1.4em; line-height: 1.4em; margin: 0 4px; vertical-align: middle;"/>
            <code>&theme=</code>
            <select id="theme" style="display: inline-block; height: 1.6em; line-height: 1.6em; font-size: 14px; margin: 0 4px; padding: 0 4px; vertical-align: middle;">
                <option value="mb">moebooru</option>
                <option value="mbh">moebooru-h</option>
                <option value="r34">rule34</option>
                <option value="r3b">rule34-big</option>
                <option value="gb">gelbooru</option>
                <option value="gbh">gelbooru-h</option>
                <option value="asl">asoul</option>
                <option value="nix">nixie</option>
                <option value="mbs">mobius</option>
            </select>
            <button id="get" style="margin: 10px 0;" onclick="_evt_push(&quot;click&quot;, &quot;normal&quot;, &quot;get_counter&quot;)">Get</button>
            <img id="result" style="display: block;"/>
            <script>
                function get_data(url, recv_fun) {
                    var httpRequest = new XMLHttpRequest();	//第一步：建立所需的对象
                    httpRequest.open('GET', url, true);		//第二步：打开连接,将请求参数写在url中
                    httpRequest.send();						//第三步：发送请求
                    httpRequest.onreadystatechange = function () {
                        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                            recv_fun(httpRequest.responseText);
                        }
                    };
                }
                var btn = document.getElementById('get'), img = document.getElementById('result')
                btn.addEventListener('click', function() {
                    var name = document.getElementById('name'), themeEl = document.getElementById('theme')
                    var text = name.value ? name.value.trim() : ''
                    var theme = themeEl.value || 'mb'
                    if (!text) alert('Please input counter name.');
                    else get_data('/cmoe?name=' + text + '&reg=fumiama', function(t) {
                        img.src = '/cmoe?name=' + text + '&theme=' + theme;
                    });
                })
            </script>
        </div>
        <p class="copy">
            <a href="https://github.com/fumiama/CMoe-Counter" target="_blank" onclick="_evt_push(&quot;click&quot;, &quot;normal&quot;, &quot;go_github&quot;)">source code</a>
        </p>
    </body>
</html>
